<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>监听</title>
</head>
<!-- 
    监听属性watch：
        1.当被监视得属性发生变化得时候，回调函数自动调用，进行相关操作
        2.监视的属性必须存在，才能进行监视！！
        3.监视的两种写法：
                (1).new Vue传入watch配置
                (2).通过Vm.$watch监视

        4.为什么不使用深度监听监测不了对象数据？
        numbers:{
            a:1,
            b:1
        }
        我们对象其实就是存到内存中指定的一个地址，比如为0x12，那么我们任意改a和b能变化其地址吗？不能，所以Vue就认为没有发生变化，就不会监测到，
        但是如果非要VUe监测到也不是不可以，暴力监听@click="numbers={a:100,b:200}"直接重新创建对象赋值，这下即使属性名和属性值都一样也会不断监听，因为
        每次创建的对象形成的内存地址都不同，所以每次都能监听到发生了变化

        5.深度监听，增加deep:true属性配置

        6.判断
                (1).Vue默认不能监测到多级结构的变化 X错误
                            比如我们更改Vm.numbers.a=0,这个时候Vue就可以监测到a发生了变化
                            但是我们watch为什么监听不到？？？？我艹这什么情况？？？？

                总结：Vue是能监测到多级结构的变化的，但是Vue为程序员提供的watch是不行的，如果想要监听，需要增加deep:true
 -->

<body>
    <div id="root">
        <h2>今天的温度为{{info}}</h2>
        <button @click=change>切换天气</button>
        <div>----------------------------------------------------</div>
        <h2>a的值为{{numbers.a}}</h2>
        <button @click="numbers.a++">a的值发生变化</button>
        <div>----------------------------------------------------</div>
        <h2>a的值为{{numbers.b}}</h2>
        <button @click="numbers.b++">b的值发生变化</button>
        <div>----------------------------------------------------</div>
        <h2>a的值为{{numbers}}</h2>
        <button @click="numbers={a:100,b:200}">不加deep属性情况下暴力监听numbers,而且每次都监听，因为每次对象创建的地址值都不同，即使属性名称和属性值都一样</button>
    </div>
    <script>
        Vue.config.productionTip = false; //以阻止vue在启动时生成生产提示
        const Vm = new Vue({
            el: "#root",
            data: {
                isHot: true,
                numbers: {
                    a: 1,
                    b: 2
                }

            },
            methods: {
                change() {
                    this.isHot = !this.isHot
                },
            },
            computed: {
                info() {
                    return this.isHot ? "炎热" : "寒冷"
                }
            },
            watch: {
                info: {
                    handler(newValue, oldValue) {
                        console.log(newValue, oldValue)
                    },
                },
                // 监听多级结构中某个属性的变化，也就是监测numbers.a
                // 直接numbers.a,不可以，因为本身我们的key值是一个字符串形式，应该写成"info"这种形式，只不过平时简写，如果是个属性表达式必须加上引号，不然不合法
                "numbers.a": {
                    handler() {
                        console.log("监听a")
                    }
                },
                //监测多级结构中所有属性的变化
                numbers: {
                    handler() {
                        console.log('监测a和b')
                    },
                    deep: true
                }
            }

        })
    </script>

</body>

</html>